/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react'
import MyHeader from './MyHeader'
import MyFooter from './MyFooter'
import GoodsItem from './GoodsItem'

import 'bootstrap/dist/css/bootstrap.css'
import './shop.css'
export default function Shop() {
  const arr = [
    {
      id: 1,
      goods_name:
        '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣',
      goods_img: 'https://www.escook.cn/vuebase/pics/1.png',
      goods_price: 108,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 2,
      goods_name:
        '嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮',
      goods_img: 'https://www.escook.cn/vuebase/pics/2.png',
      goods_price: 129,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 3,
      goods_name:
        '思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套',
      goods_img: 'https://www.escook.cn/vuebase/pics/3.png',
      goods_price: 198,
      goods_count: 1,
      goods_state: false,
    },
    {
      id: 4,
      goods_name:
        '思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套',
      goods_img: 'https://www.escook.cn/vuebase/pics/4.png',
      goods_price: 99,
      goods_count: 1,
      goods_state: false,
    },
    {
      id: 5,
      goods_name:
        '幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮',
      goods_img: 'https://www.escook.cn/vuebase/pics/5.png',
      goods_price: 156,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 6,
      goods_name: 'ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女',
      goods_img: 'https://www.escook.cn/vuebase/pics/6.png',
      goods_price: 142.8,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 7,
      goods_name:
        '幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套',
      goods_img: 'https://www.escook.cn/vuebase/pics/7.png',
      goods_price: 219,
      goods_count: 2,
      goods_state: true,
    },
    {
      id: 8,
      goods_name:
        '依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套',
      goods_img: 'https://www.escook.cn/vuebase/pics/8.png',
      goods_price: 178,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 9,
      goods_name:
        '芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬',
      goods_img: 'https://www.escook.cn/vuebase/pics/9.png',
      goods_price: 128,
      goods_count: 1,
      goods_state: false,
    },
    {
      id: 10,
      goods_name:
        'Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫',
      goods_img: 'https://www.escook.cn/vuebase/pics/10.png',
      goods_price: 153,
      goods_count: 1,
      goods_state: false,
    },
  ]

  let [list, setList] = useState([])
  let [flag, setFlag] = useState(false)

  /* 相当于：componentDidMount */
  useEffect(() => {
    /* 页面加载完毕后执行一次 */
    setList(() => {
      return (list = JSON.parse(localStorage.getItem('list')) || arr)
    })
  }, [])

  /* 相当于：componentDidUpdate */
  useEffect(() => {
    setFlag((flag) => list.every((item) => item.goods_state))
    localStorage.setItem('list', JSON.stringify(list))
  }, [list])
  /* item复选框 */
  const changeHandle = (id, flag) => {
    console.log(id, flag, 333)
    /* 
    1-获取id
    2-根据id更改list中数据的状态值
    */
    setList((list) => {
      // var index = list.findIndex((item) => item.id === id)
      // list[index].goods_state = flag
      // return list
      return list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            goods_state: flag,
          }
        } else {
          return item
        }
      })
    })
    // setFlag((flag) => {
    //   console.log(list, 77)
    //   console.log(
    //     list.every((item) => item.goods_state),
    //     88
    //   )
    //   return list.every((item) => item.goods_state)
    // })
  }

  /* 全选和反选 */
  const changeAll = (chk) => {
    /* 更改全选 */
    setFlag(chk)
    /* 1-list中所有的状态=chk */
    setList((list) => {
      return list.map((item) => {
        return {
          ...item,
          goods_state: chk,
        }
      })
    })
  }
  return (
    <div className="app">
      <MyHeader>购物车</MyHeader>
      {list.map((item) => (
        <GoodsItem
          key={item.id}
          {...item}
          changeHandle={changeHandle}
        ></GoodsItem>
      ))}

      {/* <GoodsItem></GoodsItem>
      <GoodsItem></GoodsItem>
      <GoodsItem></GoodsItem> */}
      <MyFooter list={list} flag={flag} changeAll={changeAll}></MyFooter>
    </div>
  )
}
